<script lang="ts" setup>
import type { TableColumns } from '@/types/antd'

defineOptions({
	name: 'product_supplier_SupplierList'
})

const queryParams = reactive({
	mobile: '',
	name: '',
	status: ''
})
const dataSource = ref([])
const pagination = reactive({
	current: 1,
	pageSize: 10,
	total: 0
})
const isEditShow = ref(false)
const editForm = reactive({
	id: 0,
	mobile: '',
	name: '',
	status: '',
	password: ''
})
const editFormRules = reactive({
	mobile: [{ required: true, message: t('验证.请输入手机号!') }],
	name: [{ required: true, message: t('验证.请输入账号!') }],
	status: [{ required: true, message: t('验证.请选择状态!') }],
	password: [{ required: false }]
})
const editFormRef = ref()

// 使用函数动态返回表头，实现语言切换时的实时更新
const columns = computed(
	(): TableColumns => [
		{
			title: t('供应商管理.手机号'),
			dataIndex: 'mobile',
			align: 'center' as const,
			key: 'mobile'
		},
		{
			title: t('供应商管理.供应商名'),
			dataIndex: 'name',
			align: 'center' as const,
			key: 'name'
		},
		{
			title: t('供应商管理.状态'),
			dataIndex: '_status',
			align: 'center' as const,
			key: '_status'
		},
		{
			title: t('供应商管理.创建时间'),
			dataIndex: '_created_at',
			align: 'center' as const,
			key: '_created_at'
		},
		{
			title: t('供应商管理.操作'),
			key: 'action',
			dataIndex: 'action',
			align: 'center' as const
		}
	]
)

const fetch = () => {
	const formParams: any = {
		page: pagination.current,
		pageSize: pagination.pageSize,
		name: queryParams.name,
		status: queryParams.status
	}
	formParams.permissionName = '商品库-供应商管理'
	Api.post('/product/supplier/list', formParams, true).then((res: any) => {
		dataSource.value = []
		res.items.forEach((item: any) => {
			dataSource.value.push(item)
		})
		pagination.total = res._meta.totalCount
	})
}

const handleTableChange = (paginationData: any, filters: any, sorter: any) => {
	pagination.current = paginationData.current
	pagination.pageSize = paginationData.pageSize
	fetch()
}

const showEditModal = (record: any) => {
	editForm.id = record.id || 0
	editForm.mobile = record.mobile || ''
	editForm.name = record.name || ''
	editForm.status = record.status || Enums.common.statusDatas.ACTIVE[0]
	editForm.password = ''
	isEditShow.value = true
}

const editOk = () => {
	editFormRef.value
		.validate()
		.then((valid: any) => {
			valid.id = editForm.id
			valid.permissionName = '商品库-供应商管理'
			Api.post('/product/supplier/add-or-edit', valid, true).then((data: any) => {
				if (data) {
					Api.notify(t('提示.保存成功'))
					isEditShow.value = false
					fetch()
				}
			})
		})
		.catch((error: any) => {
			console.log(error)
		})
}

const editCancel = () => {
	isEditShow.value = false
}

onMounted(() => {
	fetch()
})
</script>

<template>
	<IsGuest>
		<view>
			<a-form :model="queryParams" layout="inline">
				<a-form-item :label="t('标签.手机号')">
					<a-input
						v-model:value="queryParams.mobile"
						:placeholder="t('供应商管理.请输入手机号')" />
				</a-form-item>
				<a-form-item :label="t('标签.账户名')">
					<a-input
						v-model:value="queryParams.name"
						:placeholder="t('供应商管理.请输入供应商名')" />
				</a-form-item>
				<a-form-item :label="t('标签.状态')">
					<a-select v-model:value="queryParams.status">
						<a-select-option value="">{{ t('标签.全部') }}</a-select-option>
						<a-select-option
							v-for="(item, key) in Enums.common.statusDatas"
							:key="key"
							:value="item[0]">
							{{ item[1] }}
						</a-select-option>
					</a-select>
				</a-form-item>
				<a-form-item>
					<a-button type="primary" html-type="submit" @click="fetch">
						{{ t('按钮.筛选') }}
					</a-button>
				</a-form-item>
				<a-form-item>
					<a-button type="default" html-type="submit" @click="showEditModal">
						{{ t('按钮.添加') }}
					</a-button>
				</a-form-item>
			</a-form>
		</view>
		<a-divider />
		<view>
			<a-table
				:columns="columns"
				:bordered="true"
				:data-source="dataSource"
				:pagination="pagination"
				@change="handleTableChange">
				<template #bodyCell="{ text, record, index, column }">
					<template v-if="column.key === 'action'">
						<a-button @click="showEditModal(record)">{{ t('按钮.编辑') }}</a-button>
					</template>
				</template>
			</a-table>
			<a-modal
				:title="editForm.id > 0 ? t('编辑') : t('添加')"
				:open="isEditShow"
				@ok="editOk"
				@cancel="editCancel">
				<a-form
					ref="editFormRef"
					:model="editForm"
					:label-col="{ style: { width: '180px' } }"
					:rules="editFormRules">
					<a-form-item :label="t('标签.手机号')" name="mobile">
						<a-input
							v-model:value="editForm.mobile"
							:placeholder="t('供应商管理.请输入手机号')" />
					</a-form-item>
					<a-form-item :label="t('标签.账户名')" name="name">
						<a-input
							v-model:value="editForm.name"
							:placeholder="t('供应商管理.请输入供应商名')" />
					</a-form-item>
					<a-form-item :label="t('标签.状态')" name="status">
						<a-radio-group v-model:value="editForm.status">
							<a-radio
								v-for="(item, key) in Enums.common.statusDatas"
								:key="key"
								:value="item[0]">
								{{ item[1] }}
							</a-radio>
						</a-radio-group>
					</a-form-item>
					<a-form-item :label="t('标签.密码')" name="password">
						<a-input
							type="password"
							v-model:value="editForm.password"
							:placeholder="t('供应商管理.密码修改提示')" />
					</a-form-item>
				</a-form>
			</a-modal>
		</view>
	</IsGuest>
</template>

<style lang="scss" scoped></style>
